<template>
	<el-main>
		<el-card shadow="never">
			<el-tabs v-model="activeName">
				<el-tab-pane label="默认开启引擎" name="first">
					<el-form ref="form" :model="baseForm" label-width="80px">
						<el-form-item label="默认引擎">
							<el-radio label="local" v-model="baseForm.store_way"
								>本地存储</el-radio
							>
							<el-radio
								label="aliyun"
								v-model="baseForm.store_way"
								>阿里云OSS</el-radio
							>
							<el-radio
								label="qcloud"
								v-model="baseForm.store_way"
								>腾讯云COS</el-radio
							>
							<el-radio label="qiniu" v-model="baseForm.store_way"
								>七牛云KODO</el-radio
							>
						</el-form-item>
						<el-form-item style="margin-top: 50px">
							<el-button
								type="primary"
								@click="baseSubmit"
								style="width: 200px"
								>保存</el-button
							>
						</el-form-item>
					</el-form>
				</el-tab-pane>
				<el-tab-pane label="阿里云OSS" name="second">
					<el-form
						ref="form"
						:model="aliform"
						:label-position="labelPosition"
						label-width="160px"
					>
						<el-form-item
							label="空间域名 Domain"
							style="width: 700px"
						>
							<el-input v-model="aliform.oss_domain"></el-input>
						</el-form-item>
						<el-form-item label="AccessKey ID" style="width: 700px">
							<el-input v-model="aliform.accesskey_id"></el-input>
						</el-form-item>
						<el-form-item
							label="AccessKey Secret"
							style="width: 700px"
						>
							<el-input
								v-model="aliform.accesskey_secret"
							></el-input>
						</el-form-item>
						<el-form-item label="Bucket" style="width: 700px">
							<el-input v-model="aliform.bucket"></el-input>
						</el-form-item>
						<el-form-item label="Endpoint" style="width: 700px">
							<el-input v-model="aliform.endpoint"></el-input>
						</el-form-item>
						<el-form-item style="margin-top: 50px">
							<el-button
								type="primary"
								@click="aliSubmit"
								style="width: 200px"
								>保存</el-button
							>
						</el-form-item>
					</el-form>
				</el-tab-pane>
				<el-tab-pane label="腾讯云COS" name="third">
					<el-form
						ref="form"
						:model="qcloudform"
						:label-position="labelPosition"
						label-width="160px"
					>
						<el-form-item label="腾讯云APPID" style="width: 700px">
							<el-input
								v-model="qcloudform.tencent_appid"
							></el-input>
						</el-form-item>
						<el-form-item
							label="空间域名 Domain"
							style="width: 700px"
						>
							<el-input
								v-model="qcloudform.tencent_domain"
							></el-input>
						</el-form-item>
						<el-form-item label="SecretId" style="width: 700px">
							<el-input v-model="qcloudform.secret_id"></el-input>
						</el-form-item>
						<el-form-item label="SecretKey" style="width: 700px">
							<el-input
								v-model="qcloudform.secret_key"
							></el-input>
						</el-form-item>
						<el-form-item label="存储桶名称" style="width: 700px">
							<el-input
								v-model="qcloudform.tencent_bucket"
							></el-input>
						</el-form-item>
						<el-form-item label="所属地域" style="width: 700px">
							<el-input
								v-model="qcloudform.tencent_endpoint"
							></el-input>
						</el-form-item>
						<el-form-item style="margin-top: 50px">
							<el-button
								type="primary"
								@click="qcloudSubmit"
								style="width: 200px"
								>保存</el-button
							>
						</el-form-item>
					</el-form>
				</el-tab-pane>
				<el-tab-pane label="七牛云KODO" name="fourth">
					<el-form
						ref="form"
						:model="qiniuform"
						:label-position="labelPosition"
						label-width="160px"
					>
						<el-form-item
							label="空间域名 Domain"
							style="width: 700px"
						>
							<el-input
								v-model="qiniuform.qiniu_domain"
							></el-input>
						</el-form-item>
						<el-form-item label="accessKey" style="width: 700px">
							<el-input v-model="qiniuform.accesskey"></el-input>
						</el-form-item>
						<el-form-item label="secretKey" style="width: 700px">
							<el-input v-model="qiniuform.secretkey"></el-input>
						</el-form-item>
						<el-form-item label="空间名称" style="width: 700px">
							<el-input
								v-model="qiniuform.qiniu_bucket"
							></el-input>
						</el-form-item>
						<el-form-item label="存储区域" style="width: 700px">
							<el-input
								v-model="qiniuform.qiniu_endpoint"
							></el-input>
						</el-form-item>
						<el-form-item style="margin-top: 50px">
							<el-button
								type="primary"
								@click="qiniuSubmit"
								style="width: 200px"
								>保存</el-button
							>
						</el-form-item>
					</el-form>
				</el-tab-pane>
			</el-tabs>
		</el-card>
	</el-main>
</template>

<script>
export default {
	data() {
		return {
			labelPosition: "left",
			activeName: "first",
			baseForm: {
				store_way: "local",
			},
			aliform: {
				oss_domain: "",
				accesskey_id: "",
				accesskey_secret: "",
				bucket: "",
				endpoint: "",
			},
			qcloudform: {
				tencent_appid: "",
				tencent_domain: "",
				secret_id: "",
				secret_key: "",
				tencent_bucket: "",
				tencent_endpoint: "",
			},
			qiniuform: {
				qiniu_domain: "",
				accesskey: "",
				secretkey: "",
				qiniu_bucket: "",
				qiniu_endpoint: "",
			},
			form: {},
		};
	},
	mounted() {
		this.getBaseConf();
	},
	methods: {
		baseSubmit() {
			this.form = this.baseForm;
			this.doSubmit();
		},
		aliSubmit() {
			this.form = this.aliform;
			this.doSubmit();
		},
		qcloudSubmit() {
			this.form = this.qcloudform;
			this.doSubmit();
		},
		qiniuSubmit() {
			this.form = this.qiniuform;
			this.doSubmit();
		},
		async getBaseConf() {
			let res = await this.$API.system.store.get();
			this.baseForm = res.data.store;
			this.aliform = res.data.aliyun;
			this.qcloudform = res.data.qcloud;
			this.qiniuform = res.data.qiniu;
		},
		async doSubmit() {
			let res = await this.$API.system.storeSave.post(this.form);
			if (res.code == 0) {
				this.$message.success(res.msg);
			} else {
				this.$message.error(res.msg);
			}
		},
	},
};
</script>
